<div class="resp-tabs-container" id="portfolio">
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.profile">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">profile</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.resume">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">resume</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a resp-tab-active" role="tab" aria-controls="tab_item-0">
        <i class="hi-icon fa fa-briefcase icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">  PORTFOLIO</span>
        <i class="glyphicon glyphicon-chevron-up arrow-tabs"></i>
    </h2>
    <div class="main_content">
        <div class="content">
            <h1>Portfolio - My Works</h1>
        </div>
        <div class="container-protofilo">
            <ul class="ulList" ng-init="data.value = 1">
                <li><span class="control filter" data-filter="all" ng-class="{'active':data.value == 1}" ng-click="data.value= 1">All</span></li>
                <li><span class="control filter" data-filter=".catWeb" ng-class="{'active': data.value == 2}" ng-click="data.value= 2">Web Design</span></li>
                <li><span class="control filter" data-filter=".catGraphic" ng-class="{'active': data.value == 3}" ng-click="data.value= 3">Graphic Design</span></li>
                <li><span class="control filter" data-filter=".catMotion" ng-class="{'active': data.value == 4}" ng-click="data.value= 4">Motion Graphic</span></li>
                <li><span class="control filter" data-filter=".logo" ng-class="{'active': data.value == 5}" ng-click="data.value= 5">Logo</span></li>
            </ul>
        </div>
        <div id="portfolioList">
            <!-- .portfolio -->
            <div class="mix logo">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/1.jpg" rel="portfolio" title="Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit amet ligula non lectus.consectetur adipiscingVivamus sit amet">
                        <img src="./images/portfolio/1.jpg" alt="Visual Infography" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Logo</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->



            <!-- .portfolio -->
            <div class="mix catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="http://www.youtube.com/watch?v=c9MnSeYYtYY" rel="portfolio">

                        <img src="./images/portfolio/2.jpg" alt="Visual Infography" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Web Design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/3.jpg" rel="portfolio">
                        <img src="./images/portfolio/3.jpg" alt="Sonor's Design" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Web design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catMotion">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/4.jpg" rel="portfolio">
                        <img src="./images/portfolio/4.jpg" alt="Typography Company" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Motion Graphic</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/5.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien." rel="portfolio">
                        <img src="./images/portfolio/5.jpg" alt="Weatherette" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Web Design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catMotion">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/6.jpg" rel="portfolio">
                        <img src="./images/portfolio/6.jpg" alt="BMF" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Motion Graphic</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catGraphic">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/7.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien." rel="portfolio">
                        <img src="./images/portfolio/7.jpg" alt="Techlion" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Graphic Design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix logo">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/8.jpg" rel="portfolio" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien.">
                        <img src="./images/portfolio/8.jpg" alt="KittyPic" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Logo</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catWeb">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/9.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien." rel="portfolio">
                        <img src="./images/portfolio/9.jpg" alt="Graph Plotting" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Web Design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix catGraphic">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/10.jpg" rel="portfolio">
                        <img src="./images/portfolio/10.jpg" alt="QR Quick Response" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Graphic Design</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix logo">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/11.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien." rel="portfolio">
                        <img src="./images/portfolio/11.jpg" alt="Mobi Sock" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Logo</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <!-- .portfolio -->
            <div class="mix logo">
                <!-- .portfolio-wrapper -->
                <div class="portfolio-wrapper">
                    <a href="./images/portfolio/12.jpg" rel="portfolio">
                        <img src="./images/portfolio/12.jpg" alt="Village Community Church" />
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title">Project Name</a>
                                <span class="text-category">Logo</span>
                            </div>
                            <div class="label-bg"></div>
                        </div>
                    </a>
                </div>
                <!-- /.portfolio-wrapper -->
            </div>
            <!-- /.portfolio -->

            <div class="clear"></div>
        </div>

    </div>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.blog">
        <i class="hi-icon fa fa-bullhorn icon_menu icon_menu_active"></i>
        <span class="tite-list-resp"> blog</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.contact">
        <i class="hi-icon fa fa-envelope icon_menu"></i>
        <span class="tite-list-resp"> contact </span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
</div>